<template>
	<div style="margin-top: 50px">
    <el-row :gutter="15">
      <el-form ref="slxxform" :model="slxxform" :rules="rules" label-width="200px" style="width: 65%" label-position="right" size="medium">
        <el-col :span="24">
          <el-form-item label-width="150px" label="银行业务申请号：" prop="ywslh">
            <el-input v-model="slxxform.ywslh" show-word-limit readonly="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="150px" label="登记类型：" prop="djlx">
            <kt-select
              v-model="slxxform.djlx"
              :clearable="true"
              :options="djlxOptions"
              placeholder="请选择登记类型"
              @change="djlxChange">
            </kt-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="150px" label="区县代码：" prop="qxdm">
            <kt-select
              v-model="slxxform.qxdm"
              :options="qxdmOptions"
              placeholder="请选择区县代码"
              @change="qxdmChange">
            </kt-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="150px" label="短信联系电话：" prop="dxlxdh">
            <el-input v-model="slxxform.dxlxdh" placeholder="请输入短信联系电话" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="150px" label="咨询电话：" prop="zxdh">
            <el-input v-model="slxxform.zxdh" placeholder="请输入咨询电话" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="150px" label="短信联系人：" prop="dxlxr">
            <el-input v-model="slxxform.dxlxr" placeholder="请输入短信联系人" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150px" label="受理人：" prop="slr">
            <el-input v-model="slxxform.slr" placeholder="请输入受理人" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150px" label="受理时间：" prop="slsj">
            <el-date-picker
              type="datetime"
              placeholder="选择日期"
              v-model="slxxform.slsj"
              format="yyyy-MM-dd HH:MM:SS"
              value-format="yyyy-MM-dd HH:mm">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
	import KtSelect from "@/components/KtSelect/KtSelect";

export default {
  name: "dySlxx",
  components: {
    KtSelect
  },
  props: {
    dySlxx: Object
  },
  data() {
    return {
      slxxform: {
        ywslh: '',
        djlx: '',
        qxdm: '',
        dxlxdh: '',
        zxdh: '',
        dxlxr: '',
        slr: '',
        slsj: '',
      },
      rules: {
        ywslh: [{
          required: true,
          message: '业务申请号不能为空',
          trigger: 'blur'
        }, {
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        djlx: [{
          required: true,
          message: '请选择登记类型',
          trigger: 'change'
        }],
        qxdm: [{
          required: true,
          message: '请选择区县代码',
          trigger: 'change'
        }],
        dxlxdh: [{
          required: true,
          message: '请输入短信联系电话',
          trigger: 'blur'
        }],
        zxdh: [{
          required: true,
          message: '请输入咨询电话',
          trigger: 'blur'
        }],
        dxlxr: [{
          required: true,
          message: '请输入短信联系人',
          trigger: 'blur'
        }],
        slr: [{
          required: true,
          message: '请输入受理人',
          trigger: 'blur'
        }],
        slsj: [{
          required: true,
          message: '请输入受理时间',
          trigger: 'change'
        }],
      },
      
      // 登记类型列表
      djlxOptions: "",
      // 区县代码列表
      qxdmOptions: "",


    }
  },
  computed: {},
  watch: {},
  created() { 
    let ns = this
    ns.init();
  },
  mounted() {},
  methods: {
    // 初始化数据
    init() {
      let ns = this;

      ns.initYwslh();
      ns.slxxform.djlx = "首次登记";

      var date = new Date();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }

      ns.slxxform.slsj = date.getFullYear() + "-" + month + "-" + strDate + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
      ns.initQxdmDict("qxdm");
      ns.initDjlxDict("djlx");
      ns.autofillSlrxx();
    },

    /** 获取业务受理号 */
    initYwslh: function (data) {
      let ns = this;
      ns.$api.dyywsl
        .createYwslh(data)
        .then((res) => {
          ns.slxxform.ywslh = res.data;
        })
        .then(data != null ? data.callback : "");
    },

    initDjlxDict: function (data) {
      let ns = this;
      ns.$api.dict
        .findByType(data)
        .then((res) => {
          ns.djlxOptions = res.data;
        })
        .then(data != null ? data.callback : "");
    },

    initQxdmDict: function (data) {
      let ns = this;
      ns.$api.dict.findByType(data).then((res) => {
        ns.qxdmOptions = res.data;
        setTimeout(() => {
          ns.qxdmOptions = this.list.filter((item) => {
            return item;
          });
        }, 200);
      });
    },

    /**
     * 填充受理人信息
     */
    autofillSlrxx: function (data) {
      let ns = this;
      ns.$api.dyywsl.autofillSlrxx(data).then((res) => {
        ns.slxxform.slr = res.data.name;
        ns.slxxform.zxdh = res.data.mobile;
        ns.slxxform.dxlxr = res.data.name;
        ns.slxxform.dxlxdh = res.data.mobile;
      });
    },

    djlxChange(val, valObj) {
      let ns = this;
      ns.slxxform.djlx = val;
    },

    qxdmChange(val, valObj) {
      let ns = this;
      ns.slxxform.qxdm = val;
    },
  }
};

</script>
<style>
</style>
